<script setup lang="ts">
import { ref, type Ref } from 'vue';
import List from './components/list.vue';
import { useStore } from './stores/data';
export interface Item {
  id: number;
  name: string;
  age: number;
  gender: string;
}
const items = [
  { id: 1, name: 'John', age: 25, gender: 'Male' },
  { id: 2, name: 'Mary', age: 30, gender: 'Female' },
  { id: 3, name: 'Tom', age: 20, gender: 'Male' },
  { id: 4, name: 'Jane', age: 28, gender: 'Female' },
]
const list = ref<Item[]>([
  { id: 1, name: 'John', age: 25, gender: 'Male' },
  { id: 2, name: 'Mary', age: 30, gender: 'Female' },
  { id: 3, name: 'Tom', age: 20, gender: 'Male' },
  { id: 4, name: 'Jane', age: 28, gender: 'Female' },
]) as Ref<Item[]>;
const addage = (id: number) => {
  // alert(id)
  const index = list.value.find(item => item.id === id);
  if (index) {
    index.age += 1;
  }
}
const store = useStore();
console.log(store.datacount)
</script>
<template>
  <List :list="list">
    <template #leftButton="{ id }">
      <button @click="addage(id)">确认</button>
      <button>取消</button>
    </template>
  </List>
  <h1>{{ store.datacount }}</h1>
</template>
<style scoped>
button {
  margin-right: 10px;
  background-color: #41b883;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
</style>